<template>
	<w-container id='my-info' class='plr-13 pb-13'>
		<w-navbar navType="default" id="my-nav" title="设置中心" bgColor="#F5F5F5"></w-navbar>
	<!-- 	<view class="flex ptb-24 flex-dir-col flex-js-center flex-ai-center">
			<view class="avatar" @click="toChangeAvatar">
				<u-avatar :src="avatar" size='70'></u-avatar>
				<view style="border: 5rpx solid #fff; border-radius:128rpx;">
					<w-image src="/static/icon/avatar.png" width="64" height="64"></w-image>
				</view>
				<w-icon class='info-icon' name="camera"></w-icon>
			</view>
			<text class="mt-12 font-size-14"  @click="toChangeAvatar">{{handleLang('点击更换头像')}}</text>
		</view> -->
		<!-- <view class="bg-color-item br-12 ptb-8">
			<view class="flex flex-ai-center plr-16 ptb-12" @click="showNicknameUpdate=true">
				<text class="flex-1 font-color-999">{{handleLang('昵称')}}</text>
				<text class="mr-8 font-color-textPrimary">{{userInfo.nickname}}</text>
				<u-icon name="arrow-right" size="12" color="#999"></u-icon>
			</view>
			<view class="flex flex-ai-center plr-16 ptb-12">
				<text class="flex-1 font-color-999">{{handleLang('手机号')}}</text>
				<text class="mr-8 font-color-textPrimary">{{userInfo.hide_mobile}}</text>
				<u-icon name="arrow-right" size="12" color="#999"></u-icon>
			</view>
		</view> -->
		<view class="bg-color-white box-shadow br-12 item-box mt-12">
			<view @click="doAction(item)" v-for="(item,index) in tabs" :key="item.name" class="flex flex-ai-center flex-js-sb" :style="{marginBottom:index + 1 != tabs.length?'39px':''}">
				<view class="flex flex-ai-center">
					<w-icon :name="item.icon" size="22"></w-icon>
					<view class="font-size-18 font-color-black font-w-500 ml-13">{{ item.name }}</view>
				</view>
				<view class="flex flex-ai-center">
					<text v-if="item.rightKey == 'real_name_authentication'" class="font-size-16 ml-2 font-color-999">{{handleLang(userInfo.real_name_authentication? '已实名':"未实名")}}</text>
					<view class="flex flex-ai-center" v-if="item.rightKey == 'myInfo'">
						<view style="border: 5rpx solid #fff; border-radius:128rpx;">
							<w-image :src="userInfo.avatar" width="32" height="32"></w-image>						
						</view>
						<view class="text-overflow ml-2">{{ userInfo.nickname }}</view>
					</view>
					<u-icon name="arrow-right" size="12" color="#CACED1"></u-icon>
				</view>
			</view>
		</view>
		<view class="bg-color-white box-shadow br-12 item-box mt-12">
			<view @click="doAction(item)" v-for="(item,index) in tabs1" :key="item.name" class="flex flex-ai-center flex-js-sb" :style="{marginBottom:index + 1 != tabs1.length?'39px':''}">
				<view class="flex flex-ai-center">
					<w-icon :name="item.icon" size="22"></w-icon>
					<view class="font-size-18 font-color-black font-w-500 ml-13">{{ item.name }}</view>
				</view>
				<view class="flex flex-ai-center">
					<text v-if="item.rightKey" class="font-size-16 ml-2 font-color-999">1.0.1</text>
					<u-icon name="arrow-right" size="12" color="#CACED1"></u-icon>
				</view>
			</view>
		</view>
		<view class="bg-color-white box-shadow br-12 item-box mt-12">
			<view @click="doAction(item)" v-for="(item,index) in tabs2" :key="item.name" class="flex flex-ai-center flex-js-sb" :style="{marginBottom:index + 1 != tabs2.length?'39px':''}">
				<view class="flex flex-ai-center">
					<w-icon :name="item.icon" size="22"></w-icon>
					<view class="font-size-18 font-color-black font-w-500 ml-13">{{ item.name }}</view>
				</view>
				<view class="flex flex-ai-center">
					<text v-if="item.rightKey" class="font-size-16 ml-2 font-color-999">{{handleLang(userInfo.real_name_authentication? '已实名':"未实名")}}</text>
					<u-icon name="arrow-right" size="12" color="#CACED1"></u-icon>
				</view>
			</view>
		</view>
		
		

		<!-- <view class="bg-color-item br-12 ptb-8 mt-12">
			<view class="flex flex-ai-center plr-16 ptb-12">
				<text class="flex-1 font-color-999">{{handleLang('区块链地址')}}</text>
				<text class="mr-8 font-color-textPrimary text-overflow" style="width: 380rpx;">{{userInfo.ntf_url||handleLang('****拥有藏品后自动生成****')}}</text>
				<w-icon size="16" :name="userInfo.ntf_url? 'copy-disable':'copy-disable'" @click='copyText' color="#999"></w-icon>
			</view>
			<view class="flex flex-ai-center plr-16 ptb-12" @click="$u.route('/pages/certification/certification')">
				<text class="flex-1 font-color-999">{{handleLang('我的认证')}}</text>
				<view class="auth-tags ml-4 " :class="userInfo.real_name_authentication?'is-auth':'no-auth'"
					@click="toPage('/pages/certification/certification')">
					<w-icon name="realname-success1" size='16' v-if="userInfo.real_name_authentication"></w-icon>
					<w-icon name="no-auth" size='16' v-else></w-icon>
					<text class="font-size-12 ml-2">{{handleLang(userInfo.real_name_authentication? '已实名':"未实名")}}</text>
				</view>
				<u-icon name="arrow-right" size="12" color="#999"></u-icon>
			</view>
			<view class="flex flex-ai-center plr-16 ptb-12" @click="$u.route('/pages/my/actionPwd/getCode')">
				<text class="flex-1 font-color-999">{{handleLang('操作密码')}}</text>
				<u-icon name="arrow-right" size="12" color="#999"></u-icon>
			</view>
		</view>
		
		<view class="bg-color-item br-12 mt-12 ptb-16">
			<view class=" plr-16 ptb-12 flex flex-ai-center" v-for="item in list" :key="item.title"
				@click="doAction(item)">
				<text class='font-color-999 flex-1'>{{handleLang(item.title)}}</text>
				<u-icon name="arrow-right" size="12" color="#999"></u-icon>
			</view>
		</view>
		
		<view class="bg-color-item br-12 mt-12 mb-20 ptb-16">
			<view class=" plr-16 ptb-12 flex flex-ai-center" v-for="item in bootomList" :key="item.title"
				@click="doAction(item)">
				<text class='font-color-999 flex-1 font-size-14'>{{handleLang(item.title)}}</text>
				<u-icon name="arrow-right" size="12" color="#999"></u-icon>
			</view>
		</view>


		<view class="bg-color-item br-12 ptb-8 mt-12" @click="$u.route('/pages/my/cancellation')">
			<view class="flex flex-ai-center plr-16 ptb-12" >
				<text class="flex-1 font-color-999">{{handleLang('注销账号')}}</text>
				<u-icon name="arrow-right" size="12" color="#999"></u-icon>
			</view>
		</view> -->


		<!-- <w-button type="dark" pain class='mt-40' @click.native="showLogoutFn">{{handleLang('退出账号')}}</w-button> -->
		<w-crop ref="gmyImgCropper" :quality="1" cropperType="fixed" @getImg="getImg"></w-crop>

		<w-toast v-model="showLogout" btnType="colorful" title="" :content="handleLang('您确定要退出当前账号吗?')" contentAlign="center"
			@action='logoutRes'></w-toast>

		<w-modal :title="handleLang('修改信息')" btnType="colorful" v-model="showNicknameUpdate" @action='updateEvent'>
			<view @click="toChangeAvatar" class="flex flex-ai-center flex-js-center mt-12">
				<w-image :src="userInfo.avatar" width="48" height="48"></w-image>
			</view>
			<!--#ifdef H5 -->
			<u--input class='mt-24' :placeholder="handleLang('请输入新名称')" maxlength="8" border="none" color='#222'
				:customStyle="{backgroundColor:'#F7F8FB',height:'84rpx',padding:'0 32rpx'}"
				v-model="nicknameForm.nickname">
			</u--input>
			<!--#endif -->
			<!--#ifdef APP -->
			<u-input class='mt-24' :placeholder="handleLang('请输入新名称')" border="none" color='#222'
				:customStyle="{backgroundColor:'#F7F8FB',height:'84rpx',padding:'0 32rpx'}"
				v-model="nicknameForm.nickname">
			</u-input>
			<!--#endif -->
		</w-modal>
	</w-container>
</template>

<script>
	import {
		uploadFile
	} from '@/utils/upload.js'
	import {
		updateUserInfo
	} from '@/api/user/index.js'
	import {
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				showLogout: false,
				showNicknameUpdate: false,
				nicknameForm: {
					nickname: ''
				},
				tabs:[
					{
						type:6,
						icon:'icon-grzx',
						name:'个人信息',
						rightKey:'myInfo',
						isAuth:true,
					},
					{
						type:0,
						icon:'icon-smrz',
						name:'实名认证',
						rightKey:'real_name_authentication',
						url:'/pages/certification/certification',
						isAuth:true
					},
					{
						type:0,
						icon:'icon-yssz',
						name:'隐私设置',
						url: "/pages/my/privacy",
						isAuth:true
					},
					{
						type:0,
						icon:'icon-aqzx',
						name:'修改操作密码',
						isAuth:true,
						url:'/pages/my/actionPwd/getCode'
					},
					// {
					// 	icon:'icon-aqzx',
					// 	name:'安全中心',
					// 	isAuth:true
					// },
					// {
					// 	icon:'icon-kjfp',
					// 	name:'开具发票'
					// }
				],
				tabs1:[
					// {
					// 	icon:'iocn-bzzx',
					// 	name:'帮助中心',
					// 	isAuth:false
					// },
					{
						type:'5',
						icon:'icon-bbgx',
						name:'版本更新',
						rightKey:'real_name_authentication',
						isAuth:false
					},
					{
						type:0,
						icon:'icon-gywm',
						name:'关于我们',
						url: "/pages/my/about",
						isAuth:false
					},
					{
						type:3,
						icon:'icon-yszc',
						name:'隐私政策',
						isAuth:false
					}
				],
				tabs2:[
					{
						type:0,
						icon:'icon-zxzh',
						name:'注销账号',
						url:'/pages/my/cancellation',
						isAuth:true
					},
					{
						type:4,
						icon:'icon-tcdl',
						name:'退出登录',
						isAuth:true
					}
					
				],
				list: [
					// {
					// 	title: "区块链信息查询",
					// 	url: "https://explorer.shenzhou.bianjie.ai/#/home",
					// 	icon: "block",
					// 	type: 2
					// },
				
					// {
					// 	title: "账号与安全",
					// 	url: "/pages/my/info",
					// 	icon: "my-account",
					// 	type: 0,
					// 	isAuth: true
					// },
					{
						title: "隐私设置",
						url: "/pages/my/privacy",
						icon: "my-ys",
						type: 0,
						isAuth: true
					},
					{
						title: "收货地址",
						url: "/pages/my/address/list",
						icon: "my-addr",
						type: 0,
						isAuth: true
					}
				],
				bootomList: [
					// {
					// 	title: "XMeta 快捷交易",
					// 	url: "https://xmeta.x-metash.cn/prod/xmeta_mall/index.html#/pages/main/index",
					// 	icon: "my-about",
					// 	type: 2
					// },
					{
						title: "关于我们",
						url: "/pages/my/about",
						icon: "my-about",
						type: 0
					},
					// {
					// 	title: "我的客服",
					// 	url: "/pages/my/service",
					// 	icon: "my-service",
					// 	type: 0,
					// 	isAuth: false
					// },
					{
						title: "分享邀请",
						url: "/pages/invitation/invitation",
						icon: "my-share",
						type: 0,
						isAuth: true
					}
				],
			};
		},
		computed: {
			avatar() {
				if (this.userInfo.avatar) {
					return this.$ossUrl + this.userInfo.avatar
				}
				return;
			}
		},
		methods: {
			...mapActions('user', ['logout', 'getUserInfo']),
			toChangeAvatar() {
				// uni.showToast({
				// 	title: '暂不支持修改头像',
				// 	icon:'none'
				// })
				// return
				this.showNicknameUpdate = false
				this.$refs.gmyImgCropper.chooseImage();
			},
			showLogoutFn() {
				this.showLogout = true
			},
			logoutRes(v) {
				if (v) {
					this.logout()
				}
			},
			doAction(item) {
				let that = this;
				let {
					type,
					url,
					isAuth
				} = item;
				
				if (isAuth && !this.isLogin) {
					uni.$emit('showLogin')
					return;
				}
				
				
				
			
				if (type == 1) {
					let token=uni.getStorageSync('token');
					if(!token) return;
					this.toLocalWebview(this.appConfig.h5_domain +'/im?token='+token);
				}
			
			
				
				if (type == 0) {
					this.toPage(url)
				}
				
				if(type == 5) {
					uni.showToast({
						title:'已经是最新版本了',
						icon:'none'
					})
				}
				
				if(type ==3) {
					this.toWebview('/index/index/agreement','隐私政策')
				}
				if(type == 4) {
					this.showLogoutFn()
				}
				if(type == 6) {
					this.showNicknameUpdate = true
				}
				
				// if(type==2){
				// 	// #ifdef H5
				// 		window.location.href=url
				// 			// window.open(url)
				// 	// #endif
				// 	// #ifdef APP-PLUS
				// 		plus.runtime.openURL(url)
				// 	// #endif
				// }
				// if(type==4){
				// 	// #ifdef H5
				// 	window.location.href = this.appConfig.service_email
				// 	// window.open(url)
				// 	// #endif
				// 	// #ifdef APP-PLUS
				// 	plus.runtime.openURL(this.appConfig.service_email)
				// 	// #endif
				// }
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			updateEvent(e){
				if(e){
					uni.showLoading({
						title: "正在修改"
					})
					this.showNicknameUpdate = true
					updateUserInfo(this.nicknameForm).then(res => {
						uni.showToast({
							title:res.msg
						})
						this.getUserInfo()
					})
				}
			},
			copyText() {
				this.$tools.copyText(this.userInfo.ntf_url)
			},
			getImg({
				path,
				ext
			}) {
				uni.showLoading({
					title: "正在修改"
				})
				uploadFile(path, ext).then(res => {
					updateUserInfo({
						avatar: res
					}).then(res => {
						this.getUserInfo()
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.box-shadow {
		box-shadow: 0px 2px 4px 0px rgba(213,215,223,0.1);
	}
	.item-box {
		padding: 40rpx 34rpx;
		box-sizing: border-box;
	}
	#my-info {
		// background-image: url($IMG_URL + "/static/bg/my-bg.png");
		background-size: 750rpx auto;
		background-repeat: no-repeat;
		background-color: $main-bg-color;
		.auth-tags {
			background-color: #fff;
			color: #222;
			font-size: 16rpx;
			padding: 4rpx 16rpx;
			@extend .flex,
			.flex-ai-center,
			.flex-js-center;
			border-radius: 46px;
		}
		
		.auth-tags.is-auth {
			background: #fff;
		}

		>#my-nav /deep/ .u-navbar__content {
			// background-image: url('@/static/bg/my-bg.png');
			// background-position: top;
			// background-size: 100% auto;
		}

		.avatar {
			position: relative;

			.info-icon {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
</style>
